(function () {
  // 步骤1：创建echarts实例
  let myChart = echarts.init(document.querySelector(".pc-l1"));

  // 步骤2：定义配置（指定图表的配置项和数据）
  // let option = {
  //   grid: {
  //     left: 15,
  //     right: 20,
  //     top: 50,
  //     bottom: 10,
  //   },
  //   xAxis: [{ show: false }],
  //   yAxis: [
  //     {
  //       axisLine: "none",
  //       axisLabel: {
  //         verticalAlign: "bottom",
  //         align: "left",
  //         padding: [0, 0, 20, 10],
  //         textStyle: {
  //           color: "#fff",
  //           fontSize: 16,
  //         },
  //       },
  //       data: ["本月销售量", "本月销售额"],
  //       inverse: true,
  //     },
  //     {
  //       axisLine: "none",
  //       data: ["34,29,03.31", "34,29,03.31"],

  //       axisLabel: {
  //         verticalAlign: "bottom",
  //         align: "right",
  //         padding: [0, 10, 20, 0],
  //         textStyle: {
  //           color: "#282828",
  //           fontSize: "30",
  //           fontWeight: "bold",
  //         },
  //         formatter: function (value) {
  //           // return '{x|' + value + '%' + '}'
  //           return "{x|" + value + "}";
  //         },
  //         rich: {
  //           x: {
  //             color: "#ff6e1b",
  //             fontSize: 24,
  //             fontWeight: "bold",
  //           },
  //         },
  //       },
  //     },
  //     {
  //       axisLine: "none",
  //       data: [],
  //     },
  //   ],
  //   series: [
  //     {
  //       type: "bar",
  //       data: [70, 30],
  //       barWidth: 8,
  //       itemStyle: {
  //         normal: {
  //           color: {
  //             colorStops: [
  //               {
  //                 offset: 0,
  //                 color: "#FF4433",
  //               },
  //               {
  //                 offset: 1,
  //                 color: "rgb(243, 176, 67)",
  //               },
  //             ],
  //           },

  //           show: true,
  //           barBorderRadius: 50,
  //           borderWidth: 1,
  //           borderColor: "transparent",
  //         },
  //       },
  //     },
  //     {
  //       type: "bar",
  //       yAxisIndex: 2,
  //       data: [100, 100],
  //       barWidth: 8,
  //       itemStyle: {
  //         normal: {
  //           color: "rgba(255,255,255,.2)",
  //           show: true,
  //           barBorderRadius: 50,
  //           borderWidth: 1,
  //           borderColor: "transparent",
  //         },
  //       },
  //       z: 0,
  //     },
  //   ],
  // };

  let option = {
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '石灰石类(t)',
        data: [],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        itemStyle: {
          normal: {
            color: "rgba(255,255,255,.2)",
            show: true,
            barBorderRadius: 50,
            borderWidth: 1,
            borderColor: "transparent",
          },
        },

      }
    ]
  };


  $.ajax({
    url: 'http://127.0.0.1:3000/p1',
    success(res) {
      // console.log(res)
      option.xAxis.data = res.x
      option.series[0].data = res.y

      // 步骤3：使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    }
  })



  // 步骤4：监控网页视口
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
